<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>upload</title>
		<meta name="author" content="Administrator" />
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		 <link href="../../resources/kendo/styles/kendo.default.min.css" rel="stylesheet" />
		 <link href="../../resources/kendo/styles/kendo.common.min.css" rel="stylesheet" />
		 <script src="../../resources/kendo/js/jquery.min.js"></script>
		<script src="../../resources/kendo/js/kendo.all.min.js"></script>
		
		<script src="../../resources/common/lib/json.js"></script>
		<script src="../../resources/common/util/JsonUtils.js"></script>
		<script src="../../resources/kendo/js/util/KendoUploadUtils.js"></script>
		<!-- Date: 2014-05-24 -->
		<style>
			div.k-dropzone {
			    border: 1px solid #c5c5c5; /* For Default; Different for each theme */
			}
			
			div.k-dropzone em {
			    visibility: visible;
			}
		</style>
		<script>
			$(function() {
				uploadByForm();
   				uploadByInput();
			});
			
			function uploadByForm(){
				$("#files").kendoUpload({
   				 	// async: {
			            // saveUrl: "save",
			            // removeUrl: "remove"
			        // },
   				 	 localization: {
          			    select: "上传文件",//自定义上传按钮的text,默认为Select files
          			    remove: "移除"//自定义移除按钮
        			},
        			multiple: true,//false表示只能上传一个文件，默认为true，可以选择多个文件上传
        			showFileList: true,//false表示不显示文件列表，默认为true
        			autoUpload: false,
        			select:onSelect,
        			upload:onUpload,
        			remove:onRemove
   				 });
			}
			
			function uploadByInput(){
				$("#files2").kendoUpload({
   				 	async: {
			            saveUrl: "save",
			            removeUrl: "remove"
			        },
   				 	 localization: {
          			    select: "上传文件",//自定义上传按钮的text,默认为Select files
          			    remove: "移除"//自定义移除按钮
        			},
        			multiple: true,//false表示只能上传一个文件，默认为true，可以选择多个文件上传
        			showFileList: true,//false表示不显示文件列表，默认为true
        			autoUpload: false,
        			select:onSelect,
        			upload:onUpload,
        			remove:onRemove
   				 });
			}
			
			
			/**
			 * 每次选择一个文件触发一次
			 * 注意：
			 * 1、e.preventDefault();阻止本次选择文件
			 */
			function onSelect(e){
				 $.each(e.files, function (index, value) {
				 	var name=value.name;
				 	var size=value.size;
				 	var extension=value.extension;
				 	//alert(name);
				 	if(extension=='.txt'){
				 		alert('不能上传txt文件');
				 		e.preventDefault();
				 	}
				 	
		        });
			}
			
			/**
			 * 关闭上传文件对话框时触发
			 * 注意：
			 * １、只在async模式下有效
			 * 2、e.preventDefault();阻止文件上传
			 */
			function onUpload(e){
				 $.each(e.files, function (index, value) {
				 	var name=value.name;
				 	var size=value.size;
				 	var extension=value.extension;
				 	var temp='name='+name+',size='+size+',extension='+extension;
				 	//$('#filename').append(temp+'<br/>');
				 	if(name=='test.txt'){
				 	   var flag=confirm('提示：[test.txt]已经存在，是否要覆盖?');
				 	   if(!flag){
				 	   		e.preventDefault();
				 	   }
				 		
				 	}
				 	
				 	 
		        });
			}
			
			/**
			 * 移除文件时触发
			 */
			function onRemove(e){
				 $.each(e.files, function (index, value) {
				 	var name=value.name;
				 	var size=value.size;
				 	var extension=value.extension;
				 	var temp='name='+name+',size='+size+',extension='+extension;
				 	$('#filename').append(temp+'<br/>');
				 	 //e.preventDefault();
		        });
			}
			
			function destroy(){
				var upload = $("#files").data("kendoUpload");

			    // detach events and prepare for safe removal
			    upload.destroy();
			}
			
			/**
			 * 获得上传队列文件列表
			 */
			function getUploadFileList(){
				var upload=$("#files").data("kendoUpload");
				var files=KendoUploadUtils.getUploadQueueFileList($("#files"));
				alert(JsonUtils.toString(files));
			    
			}
			
			function getPreUploadFileList(){
				var upload=$("#files").data("kendoUpload");
				var files=KendoUploadUtils.getPreUploadQueueFileList($("#files"));
				alert(JsonUtils.toString(files));
			}
		</script>
	</head>
	<body>
		
		<h2>利用form上传文件</h2>
		<div class="k-content">
			 <iframe id='target_upload_struts' name='target_upload_struts' src='' style='display: none'> </iframe>
			 <form method="post" action="../../php/upload/upload.php" enctype="multipart/form-data" style="width:45%">
	                <div class="demo-section">
	                	<!--php中多个文件提交要加[]-->
	                    <input name="files[]" id="files" type="file" />
	                    <p>
	                        <input type="submit" value="提交" class="k-button" />
	                    </p>
	                    <p>
	                        <input type="button" value="上传文件列表" class="k-button" onclick="getUploadFileList();"/>
	                        <input type="button" value="之前上传文件列表" class="k-button" onclick="getPreUploadFileList();"/>
	                    </p>
	                </div>
	         </form>
         </div>
         <div id="filename"> </div>
         <input type="button" value="destroy" onclick="destroy()"/>
         
         <hr/>
         <h2>利用input上传文件</h2>
         <div class="k-content">
         	 <input name="files[]" id="files2" type="file" />
         </div>

	</body>
</html>

